<template>
  <div class="city-page">
    <div class="top">
      <van-search
        value="{{ searchValue }}"
        placeholder="请输入搜索关键词"
        show-action
        shape="round"
        @cancel="cancelClick"
      />
      <van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">
          <van-tab 
            v-for="(item, key) in allCities" 
            :key="key" 
            :title="item.title"
            :name="key">
          </van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <group-item :group-data="currentGroup"></group-item>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { onBeforeMount, onMounted, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import useCityStore from '../../store/modules/city'
import GroupItem from "./components/groupItem.vue"

const searchValue = ref("")
const tabActive = ref()
const router = useRouter()

const cancelClick = () => {
  router.back()
}

const cityStore = useCityStore()
cityStore.fetchAllCitiesData()
const {allCities} = storeToRefs(cityStore)
const currentGroup = computed(() => allCities.value[tabActive.value])
</script>

<style lang='less' scoped>
.city-page{
  // .top{
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }
  .content{
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>